<template>
	<cl-dialog v-model="visible" title="编辑档案信息" width="90%">
		<el-form ref="profileForm" :model="form" label-width="120px">
			<el-form-item label="姓名" prop="name">
				<el-input v-model="form.name" disabled />
			</el-form-item>
			<el-form-item label="性别" prop="gender">
				<el-radio-group v-model="form.gender" disabled>
					<el-radio :label="0">男</el-radio>
					<el-radio :label="1">女</el-radio>
					<el-radio :label="2">未知</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="出生日期" prop="birthDate">
				<el-input v-model="form.birthDate" disabled />
			</el-form-item>
			<el-form-item label="联系方式" prop="contact">
				<el-input v-model="form.contact" disabled />
			</el-form-item>
			<el-form-item label="近视情况" prop="myopiaCondition">
				<el-checkbox-group v-model="form.myopiaCondition">
					<el-checkbox label="正常视力">正常视力</el-checkbox>
					<el-checkbox label="低度近视(-0.50~-3.00D)">低度近视(-0.50~-3.00D)</el-checkbox>
					<el-checkbox label="中度近视(-3.00~-6.00D)">中度近视(-3.00~-6.00D)</el-checkbox>
					<el-checkbox label="高度近视(>-6.00D)">高度近视(>-6.00D)</el-checkbox>
				</el-checkbox-group>
			</el-form-item>
			<el-form-item label="视功能情况" prop="visualFunction">
				<el-checkbox-group v-model="form.visualFunction">
					<el-checkbox label="正常">正常</el-checkbox>
					<el-checkbox label="调节不足">调节不足</el-checkbox>
					<el-checkbox label="调节过度">调节过度</el-checkbox>
					<el-checkbox label="融合功能弱">融合功能弱</el-checkbox>
					<el-checkbox label="立体视觉缺陷">立体视觉缺陷</el-checkbox>
					<el-checkbox label="斜视/弱视">斜视/弱视</el-checkbox>
				</el-checkbox-group>
			</el-form-item>
			<el-form-item label="散光情况" prop="astigmatism">
				<el-checkbox-group v-model="form.astigmatism">
					<el-checkbox label="无散光">无散光</el-checkbox>
					<el-checkbox label="轻度(<0.75D)">轻度(<0.75D)</el-checkbox>
					<el-checkbox label="中度(0.75-1.50D)">中度(0.75-1.50D)</el-checkbox>
					<el-checkbox label="重度(>1.50D)">重度(>1.50D)</el-checkbox>
				</el-checkbox-group>
			</el-form-item>
			<el-form-item label="初步近视风险评估" prop="myopiaRisk">
				<el-checkbox-group v-model="form.myopiaRisk">
					<el-checkbox label="低风险">低风险</el-checkbox>
					<el-checkbox label="中风险">中风险</el-checkbox>
					<el-checkbox label="高风险">高风险</el-checkbox>
				</el-checkbox-group>
			</el-form-item>
			<el-form-item label="初步近视风险原因" prop="myopiaRiskReason">
				<el-checkbox-group v-model="form.myopiaRiskReason">
					<el-checkbox label="家族遗传">家族遗传</el-checkbox>
					<el-checkbox label="长时间用眼">长时间用眼</el-checkbox>
					<el-checkbox label="户外活动不足">户外活动不足</el-checkbox>
					<el-checkbox label="用眼姿势差">用眼姿势差</el-checkbox>
					<el-checkbox label="电子屏幕过度">电子屏幕过度</el-checkbox>
					<el-checkbox label="视功能异常">视功能异常</el-checkbox>
					<el-checkbox label="营养/睡眠不足">营养/睡眠不足</el-checkbox>
				</el-checkbox-group>
			</el-form-item>
			<el-form-item label="用户需求" prop="customerNeeds">
				<el-checkbox-group v-model="form.customerNeeds">
					<el-checkbox label="视力矫正(配镜)">视力矫正(配镜)</el-checkbox>
					<el-checkbox label="近视控制">近视控制</el-checkbox>
					<el-checkbox label="视功能训练">视功能训练</el-checkbox>
					<el-checkbox label="角膜塑形">角膜塑形</el-checkbox>
					<el-checkbox label="药物干预">药物干预</el-checkbox>
					<el-checkbox label="不后续复查">不后续复查</el-checkbox>
					<el-checkbox label="科普咨询">科普咨询</el-checkbox>
				</el-checkbox-group>
			</el-form-item>
			<el-form-item label="用户认知" prop="customerAwareness">
				<el-checkbox-group v-model="form.customerAwareness">
					<el-checkbox label="了解近视危害">了解近视危害</el-checkbox>
					<el-checkbox label="了解近视控制方法">了解近视控制方法</el-checkbox>
					<el-checkbox label="了解角膜塑形">了解角膜塑形</el-checkbox>
					<el-checkbox label="了解低浓度阿托品">了解低浓度阿托品</el-checkbox>
					<el-checkbox label="了解视功能训练">了解视功能训练</el-checkbox>
					<el-checkbox label="关注安全性">关注安全性</el-checkbox>
					<el-checkbox label="关注性价比">关注性价比</el-checkbox>
				</el-checkbox-group>
			</el-form-item>
			<el-form-item label="前期成交意向" prop="dealIntention">
				<el-radio-group v-model="form.dealIntention">
					<el-radio label="高(1个月内)">高(1个月内)</el-radio>
					<el-radio label="中(3个月内)">中(3个月内)</el-radio>
					<el-radio label="低(6个月内)">低(6个月内)</el-radio>
					<el-radio label="暂无计划">暂无计划</el-radio>
					<el-radio label="仅咨询">仅咨询</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="生活习惯" prop="lifeHabits">
				<el-checkbox-group v-model="form.lifeHabits">
					<el-checkbox label="户外≥2h/天">户外≥2h/天</el-checkbox>
					<el-checkbox label="每日电子屏幕≤2h">每日电子屏幕≤2h</el-checkbox>
					<el-checkbox label="用眼休息规律">用眼休息规律</el-checkbox>
				</el-checkbox-group>
			</el-form-item>
			<el-form-item label="既往干预史" prop="interventionHistory">
				<el-checkbox-group v-model="form.interventionHistory">
					<el-checkbox label="曾戴OK镜">曾戴OK镜</el-checkbox>
					<el-checkbox label="曾用阿托品">曾用阿托品</el-checkbox>
					<el-checkbox label="视功能训练中">视功能训练中</el-checkbox>
					<el-checkbox label="无任何干预">无任何干预</el-checkbox>
				</el-checkbox-group>
			</el-form-item>
			<el-form-item label="决策者身份" prop="decisionMaker">
				<el-checkbox-group v-model="form.decisionMaker">
					<el-checkbox label="学生本人">学生本人</el-checkbox>
					<el-checkbox label="家长决策">家长决策</el-checkbox>
					<el-checkbox label="医生推荐">医生推荐</el-checkbox>
				</el-checkbox-group>
			</el-form-item>
			<el-form-item label="竞争品牌使用" prop="competitorUsage">
				<el-checkbox-group v-model="form.competitorUsage">
					<el-checkbox label="正在用他牌OK镜">正在用他牌OK镜</el-checkbox>
					<el-checkbox label="其他近视控制产品">其他近视控制产品</el-checkbox>
					<el-checkbox label="未使用任何产品">未使用任何产品</el-checkbox>
				</el-checkbox-group>
			</el-form-item>
			<el-form-item label="转化策略" prop="convertPlan">
				<el-input v-model="form.convertPlan" />
			</el-form-item>
			<el-form-item label="备注" prop="remark">
				<el-input v-model="form.remark" />
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="handleCancel">取消</el-button>
			<el-button type="primary" @click="handleSave">确定</el-button>
		</template>
	</cl-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref, computed, watch } from 'vue';
import { useCool } from '/@/cool';
import { ElMessage } from 'element-plus';

const { service } = useCool();

const props = defineProps({
	modelValue: {
		type: Boolean,
		default: false
	},
	studentId: {
		type: [Number, String],
		default: 0
	},
	studentInfo: {
		type: Object,
		default: () => ({})
	}
});

const emit = defineEmits(['update:modelValue']);

const visible = computed({
	get: () => props.modelValue,
	set: val => emit('update:modelValue', val)
});

const form = reactive({
	userId: 0,
	name: '',
	gender: 0,
	birthDate: '',
	contact: '',
	myopiaCondition: [],
	visualFunction: [],
	astigmatism: [],
	myopiaRisk: [],
	myopiaRiskReason: [],
	customerNeeds: [],
	customerAwareness: [],
	dealIntention: '',
	lifeHabits: [],
	interventionHistory: [],
	decisionMaker: [],
	competitorUsage: [],
	convertPlan: '',
	remark: ''
});

// 初始化档案信息
async function initProfile() {
	if (!props.studentId) return;

	try {
		const res = await service.userProfile.profile.getByUserId({
			userId: props.studentId
		});

		// 将返回的数据映射到表单
		Object.assign(form, {
			userId: res.userId || props.studentId,
			name: res.name || props.studentInfo.userName,
			gender: res.gender,
			birthDate: res.birthDate
				? res.birthDate.split(' ')[0]
				: props.studentInfo.userBirthday?.split(' ')[0],
			contact: res.contact || props.studentInfo.userPhone,
			myopiaCondition: Array.isArray(res.myopiaCondition) ? res.myopiaCondition : [],
			visualFunction: Array.isArray(res.visualFunction) ? res.visualFunction : [],
			astigmatism: Array.isArray(res.astigmatism) ? res.astigmatism : [],
			myopiaRisk: Array.isArray(res.myopiaRisk) ? res.myopiaRisk : [],
			myopiaRiskReason: Array.isArray(res.myopiaRiskReason) ? res.myopiaRiskReason : [],
			customerNeeds: Array.isArray(res.customerNeeds) ? res.customerNeeds : [],
			customerAwareness: Array.isArray(res.customerAwareness) ? res.customerAwareness : [],
			dealIntention: res.dealIntention || '',
			lifeHabits: Array.isArray(res.lifeHabits) ? res.lifeHabits : [],
			interventionHistory: Array.isArray(res.interventionHistory)
				? res.interventionHistory
				: [],
			decisionMaker: Array.isArray(res.decisionMaker) ? res.decisionMaker : [],
			competitorUsage: Array.isArray(res.competitorUsage) ? res.competitorUsage : [],
			convertPlan: res.convertPlan || '',
			remark: res.remark || ''
		});
	} catch (error) {
		console.log('initProfile fail');
		// 使用学员基本信息初始化档案
		Object.assign(form, {
			userId: props.studentId,
			name: props.studentInfo.userName,
			gender: props.studentInfo.userGender,
			birthDate: props.studentInfo.userBirthday
				? props.studentInfo.userBirthday.split(' ')[0]
				: '',
			contact: props.studentInfo.userPhone,
			myopiaCondition: [],
			visualFunction: [],
			astigmatism: [],
			myopiaRisk: [],
			myopiaRiskReason: [],
			customerNeeds: [],
			customerAwareness: [],
			dealIntention: '',
			lifeHabits: [],
			interventionHistory: [],
			decisionMaker: [],
			competitorUsage: [],
			convertPlan: '',
			remark: ''
		});
	}
}

// 保存档案信息
async function handleSave() {
	try {
		await service.userProfile.profile.addOrUpdateByUserId(form);
		ElMessage.success('保存成功');
		visible.value = false;
		emit('saved');
	} catch (error) {
		ElMessage.error('保存失败');
	}
}

const handleCancel = () => {
	visible.value = false;
};

watch([() => visible.value, () => props.studentId], ([newVisible, newStudentId]) => {
	if (newVisible && newStudentId) {
		initProfile();
	}
});

defineExpose({
	form
});
</script>
